import { type ThemeDefinition } from 'vuetify';
import colors from 'vuetify/lib/util/colors';

export const light: ThemeDefinition = {
  dark: false,
  colors: {
    background: "#FFF",
    "on-background": '#222',
    primary: "#0F46C1",
    'on-primary': "#fff",
    secondary: "#1C78F0",
    "on-secondary": "#fff",
    surface: "#fff",
    "on-surface": colors.grey.darken4,
    error: colors.red.lighten1,
    info: colors.lightBlue.accent1,
    success: colors.green.accent4,
    warning: colors.orange.accent4,

    "text--primary": "#383F4F",
    "text--secondary": "#737882",
    "text--disabled": "#A3A6AD",
    "text--black": "#1C2436",
    "foucs-primary-bg": "#DEE4F0",
    "header-bg": "#FAFAFA",
    "table-header-bg": "#FAFAFA",
    "foucs-bg": "#E0E1E2",
    "tooltip-background-color": "#1C2436",
    "disabled-bg": "#F2F2F3",
    "divider": "#DADBDD",
    "light-divider": "#E9E9EA",
    "grey-lighten-4": "#f5f5f5",
    "richText-bg": "#ffffff",
    "icon-active": "#7D828C",
    "icon-inactive": "#B4B7BC",
    "chip": "#F2F2F3",
    "grey-darken-1": "#757575"
  },

  variables: {
    'border-color': colors.grey.darken1,
    'border-opacity': 0.12,
    'high-emphasis-opacity': 0.87,
    'medium-emphasis-opacity': 0.60,
    'disabled-opacity': 0.38,
    'idle-opacity': 0.04,
    'hover-opacity': 0.04,
    'focus-opacity': 0.12,
    'selected-opacity': 0.08,
    'activated-opacity': 0.12,
    'pressed-opacity': 0.12,
    'dragged-opacity': 0.08,
    'theme-kbd': colors.blue.accent2,
    'theme-on-kbd': '#FFF',
    'theme-code': colors.blue.accent2,
    'theme-on-code': '#fff',
  }
}

export const dark: ThemeDefinition = {
  dark: true,
  colors: {
    background: colors.grey.darken2,
    "on-background": '#fff',
    primary: "#86B1FF",
    'on-primary': "#fff",
    secondary: "#C0E7FF",
    "on-secondary": "#fff",
    surface: colors.grey.darken3,
    "on-surface": '#fff',
    error: colors.red.darken3,
    info: colors.lightBlue.darken3,
    success: colors.green.darken3,
    warning: colors.orange.darken4,

    "text--primary": "#E8E8E9",
    "text--secondary": "#C5C6C6",
    "text--disabled": "#909092",
    "text--black": "#FFFFFF",
    "foucs-primary-bg": "#2E3543",
    "header-bg": "#26272B",
    "table-header-bg": "#26272B",
    "foucs-bg": "#3F4043",
    "tooltip-background-color": "#1C2436",
    "disabled-bg": "#303133",
    "divider": "#6C6D6E",
    "light-divider": "#303133",
    "grey-lighten-4": "#212121",
    "richText-bg": colors.grey.darken2,
    "icon-active": "#FFFFFF",
    "icon-inactive": "#909092",
    "chip": "#555555",
    "grey-darken-1": "#BDBDBD"
  },
  variables: {
    'border-color': '#FFFFFF00',//透明
    'border-opacity': 0.12,
    'high-emphasis-opacity': 0.87,
    'medium-emphasis-opacity': 0.60,
    'disabled-opacity': 0.38,
    'idle-opacity': 0.04,
    'hover-opacity': 0.04,
    'focus-opacity': 0.12,
    'selected-opacity': 0.08,
    'activated-opacity': 0.12,
    'pressed-opacity': 0.12,
    'dragged-opacity': 0.08,
    'theme-kbd': colors.purple.darken1,
    'theme-on-kbd': '#FFF',
    'theme-code': 'colors.purple.darken3',
    'theme-on-code': '#FFF'
  }
}
